// 未登录则跳转到登录页
(function(){
    try {
        if (localStorage.getItem('auth.loggedIn') !== 'true') {
            window.location.replace('login.html');
        }
    } catch (e) {}
})();

// 获取用户信息
function getUserInfo() {
    try {
        return {
            realName: localStorage.getItem('auth.realName') || '用户',
            username: localStorage.getItem('auth.username') || '',
            email: localStorage.getItem('auth.email') || ''
        };
    } catch (e) {
        return { realName: '用户', username: '', email: '' };
    }
}

// 使用React.createElement重写图标组件
function ChevronLeft({ className = "w-5 h-5" }) {
    return React.createElement('svg', {
        className,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
    }, 
        React.createElement('polyline', { points: "15 18 9 12 15 6" })
    );
}

function ChevronRight({ className = "w-5 h-5" }) {
    return React.createElement('svg', {
        className,
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round"
    }, 
        React.createElement('polyline', { points: "9 18 15 12 9 6" })
    );
}

function ScoringDetail() {
    const [activeItem, setActiveItem] = React.useState(0);
    const [sidebarExpanded, setSidebarExpanded] = React.useState(false);
    const [showOnlyDeductions, setShowOnlyDeductions] = React.useState(false);
    
    const userInfo = getUserInfo();

    const mainCategories = [
        {
            id: 1,
            title: '素质要求',
            items: [
                { id: 1, title: '服装鞋帽整洁', score: '-0' },
                { id: 2, title: '仪表大方', score: '-0' },
                { id: 3, title: '举止端庄', score: '-0' }
            ]
        },
        {
            id: 2,
            title: '操作前人员准备',
            items: [
                { id: 4, title: '修剪指甲', score: '-0' },
                { id: 5, title: '取下饰物', score: '-0.5' },
                { id: 6, title: '卷袖过肘', score: '-0' },
                { id: 7, title: '戴帽子（头发不外露）', score: '-0' },
                { id: 8, title: '洗手', score: '-0' },
                { id: 9, title: '戴口罩（贴合面鼻）', score: '-0.5' }
            ]
        },
        {
            id: 3,
            title: '操作前备齐用物',
            items: [
                { id: 10, title: '隔离衣', score: '-0' },
                { id: 11, title: '手消毒液', score: '-0' },
                { id: 12, title: '手套', score: '-0' },
                { id: 13, title: '污物桶', score: '-0' },
                { id: 14, title: '医废箱', score: '-0' }
            ]
        },
        {
            id: 4,
            title: '操作前环境准备',
            items: [
                { id: 15, title: '规定区域穿脱', score: '-0' },
                { id: 16, title: '环境宽敞清洁', score: '-0' }
            ]
        },
        {
            id: 5,
            title: '穿隔离衣',
            items: [
                { id: 17, title: '检查隔离衣：型号合适、有效期、无破损、无潮湿', score: '-0' },
                { id: 18, title: '取隔离衣：手持衣领、展开隔离衣', score: '-1' },
                { id: 19, title: '穿袖：一左、二右、三伸手', score: '-0' },
                { id: 20, title: '系领口松紧合适', score: '-0' },
                { id: 21, title: '系腰带：先后腰带后前腰带', score: '-0' },
                { id: 22, title: '工作服不外露', score: '-1' },
                { id: 23, title: '戴手套、紧裹袖口', score: '-0' }
            ]
        },
        {
            id: 6,
            title: '脱隔离衣',
            items: [
                { id: 24, title: '首次手消毒', score: '-0' },
                { id: 25, title: '脱手套、丢弃医废箱', score: '-1' },
                { id: 26, title: '再次手消毒', score: '-0' },
                { id: 27, title: '解领口系带、解腰带', score: '-2' },
                { id: 28, title: '脱袖脱衣', score: '-1' },
                { id: 29, title: '卷衣无污染、丢弃医废箱', score: '-0.5' },
                { id: 30, title: '第三次手消毒', score: '-0' },
                { id: 31, title: '脱口罩：先解颈带后解头带、丢弃医废箱', score: '-0' },
                { id: 32, title: '第四次手消毒', score: '-0' },
                { id: 33, title: '脱帽子：由内侧向外卷、丢弃医废箱', score: '-0' }
            ]
        },
        {
            id: 7,
            title: '操作结束',
            items: [
                { id: 34, title: '流动水洗手', score: '-0' }
            ]
        },
        {
            id: 8,
            title: '熟练程度',
            items: [
                { id: 35, title: '动作稳、准、轻、符合操作原则', score: '-1' },
                { id: 36, title: '无污染', score: '-0' },
                { id: 37, title: '操作时长适宜', score: '-0' }
            ]
        }
    ];

    const scrollToCategory = (categoryIndex) => {
        setActiveItem(categoryIndex);
        const element = document.getElementById(`category-${categoryIndex}`);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    };

    return React.createElement('div', { className: 'flex flex-col h-screen bg-gray-100' },
        // 顶部用户信息
        React.createElement('div', { className: 'bg-white px-4 py-3 border-b border-gray-200' },
            React.createElement('div', { className: 'flex items-center mb-1' },
                React.createElement(ChevronLeft, { className: 'w-5 h-5 text-gray-600 mr-2' }),
                React.createElement('span', { className: 'text-gray-800 font-semibold text-lg' }, userInfo.realName)
            ),
            React.createElement('div', { className: 'text-sm text-gray-600' }, userInfo.username)
        ),

        React.createElement('div', { className: 'flex flex-1 overflow-hidden' },
            // 左侧可展开菜单
            React.createElement('div', { 
                className: `bg-white shadow-lg transition-all duration-300 border-r border-gray-200 ${
                    sidebarExpanded ? 'w-48' : 'w-16'
                }`
            },
                // 展开/收缩按钮
                React.createElement('div', { className: 'flex items-center justify-between px-4 py-4 border-b border-gray-200' },
                    sidebarExpanded && React.createElement('span', { className: 'text-sm font-semibold text-gray-700' }, '评分项'),
                    React.createElement('button', {
                        onClick: () => setSidebarExpanded(!sidebarExpanded),
                        className: 'flex items-center justify-center w-8 h-8 hover:bg-gray-100 rounded transition'
                    },
                        React.createElement(ChevronRight, { 
                            className: `w-5 h-5 text-gray-600 transition-transform ${
                                sidebarExpanded ? 'rotate-180' : ''
                            }`
                        })
                    )
                ),

                // 菜单项列表
                React.createElement('div', { 
                    className: 'overflow-y-auto scrollbar-thin', 
                    style: { height: 'calc(100% - 60px)' } 
                },
                    mainCategories.map((category, index) => 
                        React.createElement('button', {
                            key: category.id,
                            onClick: () => scrollToCategory(index),
                            className: `w-full px-4 py-3 text-left transition-colors border-l-4 ${
                                activeItem === index
                                    ? 'bg-blue-50 border-l-blue-500 text-blue-600 font-semibold'
                                    : 'border-l-transparent text-gray-700 hover:bg-gray-50'
                            }`
                        },
                            sidebarExpanded 
                                ? React.createElement('div', { className: 'text-sm' },
                                    React.createElement('span', { className: 'font-semibold' }, `${category.id}.`),
                                    React.createElement('span', null, category.title)
                                  )
                                : React.createElement('div', { className: 'text-center font-semibold text-lg' }, category.id)
                        )
                    )
                )
            ),

            // 主内容区域
            React.createElement('div', { className: 'flex-1 flex flex-col overflow-hidden' },
                // 右侧内容 - 可滚动区域
                React.createElement('div', { className: 'flex-1 overflow-y-auto scrollbar-thin' },
                    React.createElement('div', { className: 'bg-white' },
                        // 总分卡片
                        React.createElement('div', { className: 'bg-gradient-to-r from-teal-50 to-blue-50 p-4 border-b border-gray-200' },
                            React.createElement('div', { className: 'flex justify-between items-center' },
                                React.createElement('div', null,
                                    React.createElement('div', { className: 'text-sm text-gray-600 mb-1' }, '总得分'),
                                    React.createElement('div', { className: 'text-3xl font-bold text-gray-900' }, '91.5分')
                                ),
                                React.createElement('div', { className: 'text-right' },
                                    React.createElement('div', { className: 'text-sm text-gray-600 mb-1' }, '评阅人'),
                                    React.createElement('div', { className: 'text-base font-semibold text-gray-800' }, userInfo.realName)
                                )
                            )
                        ),

                        // 操作时间
                        React.createElement('div', { className: 'flex items-center px-4 py-3 bg-white border-b border-gray-100' },
                            React.createElement('div', { className: 'w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center mr-3' },
                                React.createElement('div', { className: 'w-4 h-4 bg-yellow-400 rounded-full' })
                            ),
                            React.createElement('div', { className: 'flex-1' },
                                React.createElement('div', { className: 'text-sm text-gray-600' }, '开始计时'),
                                React.createElement('div', { className: 'text-lg font-bold text-teal-600' }, '05:29')
                            ),
                            React.createElement('div', { className: 'flex items-center' },
                                React.createElement('span', { className: 'text-xs text-gray-500 mr-2' }, '仅显示扣分项'),
                                React.createElement('button', {
                                    onClick: () => setShowOnlyDeductions(!showOnlyDeductions),
                                    className: `w-10 h-6 rounded-full transition-colors relative ${
                                        showOnlyDeductions ? 'bg-teal-500' : 'bg-gray-300'
                                    }`
                                },
                                    React.createElement('div', { 
                                        className: `absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
                                            showOnlyDeductions ? 'translate-x-5' : 'translate-x-1'
                                        }`
                                    })
                                )
                            )
                        ),

                        // 标题
                        React.createElement('div', { className: 'px-6 py-3 bg-white border-b-2 border-gray-200 text-center' },
                            React.createElement('h3', { className: 'text-base font-bold text-gray-800' }, '一次性隔离衣穿脱评分标准')
                        ),

                        // 分类内容
                        mainCategories.map((category, categoryIndex) =>
                            React.createElement('div', { 
                                key: category.id, 
                                id: `category-${categoryIndex}`
                            },
                                // 分类标题
                                React.createElement('div', { className: 'bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-3 border-b-2 border-gray-200 flex justify-between items-center' },
                                    React.createElement('h3', { className: 'text-sm font-bold text-gray-800' },
                                        `${category.id}. ${category.title}`
                                    ),
                                    React.createElement('span', { className: 'text-sm font-semibold text-orange-500' },
                                        `扣${Math.abs(category.items.reduce((sum, item) => sum + parseFloat(item.score.replace('-', '')), 0)).toFixed(1)}分`
                                    )
                                ),

                                // 分类下的明细项
                                category.items
                                    .filter(item => !showOnlyDeductions || parseFloat(item.score.replace('-', '')) !== 0)
                                    .map((item, itemIndex) =>
                                        React.createElement('div', {
                                            key: item.id,
                                            className: 'flex items-center px-6 py-2 border-b border-gray-100 hover:bg-gray-50 transition-colors'
                                        },
                                            React.createElement('div', { className: 'flex-shrink-0 w-5 h-5 flex items-center justify-center mr-3' },
                                                React.createElement('span', { className: 'text-xs font-semibold text-gray-500' },
                                                    itemIndex + 1
                                                )
                                            ),
                                            React.createElement('div', { className: 'flex-1' },
                                                React.createElement('div', { className: 'text-xs text-gray-800' },
                                                    item.title
                                                )
                                            ),
                                            React.createElement('div', { 
                                                className: `text-xs font-semibold ${
                                                    item.score.includes('-0') ? 'text-orange-400' : 'text-gray-600'
                                                }`
                                            },
                                                item.score
                                            )
                                        )
                                    )
                            )
                        )
                    )
                ),

                // 底部按钮 - 固定不动
                React.createElement('div', { 
                    className: 'bg-teal-500 text-white text-center py-4 font-semibold cursor-pointer hover:bg-teal-600 transition border-t border-teal-600'
                }, '保存总得分')
            )
        )
    );
}

// 渲染应用
ReactDOM.render(React.createElement(ScoringDetail), document.getElementById('root'));


